快要登頂了... 千萬別放棄!

Where there’s a will, there’s a way.
有志者事竟成。

倒數2天，就可以完成 30篇~
今日要講解 OverlayPanel ，一種可以在點擊按鈕或其他觸發事件後，浮動顯示在頁面上的 UI 元件，通常用來展示額外的內容或操作選項。

1. 元件模板部分 ()

<template>
    <div class="card flex justify-content-center">
        <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
        <OverlayPanel ref="op">
            <!-- OverlayPanel 內部的內容 -->
        </OverlayPanel>
    </div>
    <OverlayPanel ref="op">
    .....
    </OverlayPanel>
</template>

• Button: 點擊後會觸發 toggle 函數，顯示或隱藏 OverlayPanel。
• OverlayPanel: 是一個彈出式面板。

2. script 部分

<script setup>
import { ref } from "vue";

const op = ref();
const members = ref([
    { name: 'Amy Elsner', image: 'amyelsner.png', email: 'amy@email.com', role: 'Owner' },
    { name: 'Bernardo Dominic', image: 'bernardodominic.png', email: 'bernardo@email.com', role: 'Editor' },
    { name: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' }
]);

const toggle = (event) => {
    op.value.toggle(event);
}
</script>

• op = ref(): 創建一個 OverlayPanel 元件的引用，後續通過 op.value 來控制面板的顯示與隱藏。
• toggle(event): 當按下按鈕時，會調用 op.value.toggle(event) 來打開或關閉 OverlayPanel。

以上是 OverlayPanel 簡單介紹~
明天見!

參考資料:
https://v3.primevue.org/overlaypanel/